
<template>
  <template v-for="menu in props.menuList" :key="menu.path">
    <el-menu-item
        :index="menu.path"
        @click="handleMenu(menu)"
        v-if="!menu.children || menu.children?.length === 0"
    >
      <template v-if="menu?.icon"
      ><component class="icons" :is="menu?.icon"></component
      ></template>
      <span>{{ menu?.label || "" }}</span>
    </el-menu-item>
    <el-sub-menu
        :index="menu.path"
        v-if="menu.children && menu.children.length > 0"
    >
      <template #title>
        <template v-if="menu?.icon"
        ><component class="icons" :is="menu?.icon"></component
        ></template>
        <span>{{ menu?.label || "" }}</span>
      </template>
      <el-menu-item-group>
        <customMenuItem :menuList="menu.children" />
      </el-menu-item-group>
    </el-sub-menu>
  </template>
</template>


<script setup>
import { defineProps } from "vue";
import { useRouter } from "vue-router";
import { useAllDataStore } from "@/stores";
import customMenuItem from "./customMenuItem.vue";

const store = useAllDataStore();

const props = defineProps({
  menuList: {
    type: Object,
    default: () => [],
  },
});

const router = useRouter();

const handleMenu = (item) => {
  router.push(item.path);
  store.selectMenu(item);
};
</script>


<style lang="less" scoped>
.icons {
  width: 18px;
  height: 18px;
  margin-right: 5px;
}
</style>
